<template>
  <div>
    <van-tabbar v-model="active" v-if="showTabBar" active-color="#90CE3D">
      <van-tabbar-item v-for="link in props.links" :key="link.url" :to="link.url" :icon="link.icon">
        {{ link.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';

const props = defineProps({
  links: {
    type: Array,
    required: true
  }
});

const route = useRoute();

const active = ref(0);

const calculateActiveIndex = () => {
  const index = props.links.findIndex((link) => link.url === route.path);
  return index === -1 ? 0 : index;
};

watch(
  () => route.path,
  () => {
    active.value = calculateActiveIndex();
  },
  { immediate: true },
);

const showTabBar = computed(() => {
  return route.meta.showTabBar === true;
});
</script>

<style scoped lang="scss"></style>
